import styled from "@emotion/styled"
import { ReactNode } from "react"

const _BaseRoundButton = styled.button<{ width?: number; height?: number }>`
    background: linear-gradient(90deg, #ff3568 10%, #ff33cc 100%);
    width: ${({ width }) => width || 128}rem;
    height: ${({ height }) => height || 32}rem;
    border-radius: ${({ height }) => (height ? height / 2 : 16)}rem;
    font-weight: 700;
    font-size: 14rem;
    color: #fff;
    cursor: pointer;
    border: 0 none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
`

export const BaseRoundButton = ({
    width = 128,
    height = 32,
    children = "",
    onClick,
}: {
    children: ReactNode
    width?: number
    height?: number
    onClick?: () => void
}) => {
    return (
        <_BaseRoundButton
            width={width}
            height={height}
            children={children}
            onClick={() => onClick?.()}
        />
    )
}
